const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const { srcPath, distPath } = require("./paths")

module.exports = {
  // 不管是开发打包还是生产打包，都需要配置入口
  entry: path.join(srcPath, "index.js"),
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: ["babel-loader"],
        include: srcPath,
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        // loader执行顺序是从后向前的
        // 先使用css-loader加载css模块，处理之，交给style-loader
        // style-loader是通过操作DOM的方式，把样式插入到页面中
        loader: ["style-loader", "css-loader",],
      },
      {
        test: /\.less$/,
        // 模块后缀是以less结束的，需要使用less-loader转化成css
        loader: ["style-loader", "css-loader", "postcss-loader", "less-loader"],
      },
      // {
      //   test: /\.(png|jpg|jpeg|gif)$/,
      //   loader: ["file-loader"],
      // },
    ]
  },
  plugins: [
    // 一个插件就是一个类，需要new
    // 不管是开发打包还是生产打包，都需要一张页面
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "..", "public/index.html"),
      filename: "index.html"
    })
  ]
}